export default [
    /*
    {//路由重定向
        path: "/",
        redirect: "/demo8",
    },
    */
    {
        path: "/index",
        component:()=>import("../views/Index.vue")
    },
    {
        path: "/crud",
        component:()=>import("../views/test/Crud.vue")
    },
    {
        path: "/test",
        component:()=>import("../views/test/Index.vue")
    },
    {
        path: "/demo", //vue2 与 vue3 兼容性差异
        component:()=>import("../views/test/Demo.vue")
    },
    {
        path: "/demo2", //ref 与 reactivity 响应式数据 
        component:()=>import("../views/test/Demo2.vue")
    },
    {
        path: "/demo3", //toRef toRefs 转响应式数据 与 mounted 计算属性
        component:()=>import("../views/test/Demo3.vue")
    },
    {
        path: "/demo4", //watch 监测数据的5种情况
        component:()=>import("../views/test/Demo4.vue")
    },
    {
        path: "/demo5", //ref标签  TS 的接口与泛型
        component:()=>import("../views/test/Demo5.vue")
    },
    {
        path: "/demo6", //_props的使用
        component:()=>import("../views/test/Demo6.vue")
    },
    {
        path: "/demo7", //vue3的自定义钩子，即模块化
        component:()=>import("../views/test/Demo7.vue")
    },
    
    {
        path: "/demo8", //vue3路由模式，子路由，及路由传参
        component:()=>import("../views/test/Demo8.vue"),
        
        children:[
            {
                name: "home",
                path: "/home/:id/:name/:content?",
                component:()=>import("../views/test/demo/Home.vue")
            },
            
            {
                name: "about",
                path: "/about",
                component:()=>import("../views/test/demo/About.vue")
            },
            
            {
                name: "news",
                path: "/news",
                component:()=>import("../views/test/demo/News.vue"),
                children:[
                    {
                        
                        name: "detail",
                        path: "/detail",
                        component:()=>import("../views/test/demo/Detail.vue")
                        
                    },
                    {  
                        /*
                        路由规则的props配置
                        
                        */
                        name: "detail2",
                        path: "/detail2",
                        component:()=>import("../views/test/demo/Detail2.vue"),
                        //第一种： 将路由收到所有params参数作为props传给路由组件
                        //  path为：/detail2/:id/:title/:content?
                        //props:true
                        
                        //第二种写法：函数写法，可以自己决定将什么作为props给路由组件
                        props(route){    
                            return route.query
                        }
                         //第三种写法：对象写法，可以自己决定将什么作为props给路由组件，写死写法用的少
                         /*
                            props:{
                                id:1,
                                name:"pony"
                            }
                         */
                        
                    },
                    /*
                    {//路由重定向
                        path: "/",
                        redirect: "/about"
                    },
                    */
                
                ]
            }
            
        ]
    
    },
    { //pinia 状态管理(存储并管理数据)
        name: "demo9",
        path: "/demo9",
        component:()=>import("../views/test/Demo9.vue")
    },

    
     
]
